/*
    2023/3/7
    购物车列表页面

    
 */
<template>
    <div>
        <!--头部区域-->
        <PageHeader />

        <!--导航区域-->
        <PageNav />

        <!--内容区域-->
        <div class="list">
            <div class="box">
                <div class="detail">

                    <el-button type="danger" @click="eventDelete">删除选中的商品</el-button>
                    <!--显示购物车列表-->
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column label="名称">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-col :span="12">
                                        <img :src="'http://localhost:5217/' + scope.row.image"
                                            style="width:50px" /></el-col>
                                    <el-col :span="12"> <span class="aaaa"> {{ scope.row.name }}
                                        <div class="bbbb">abbbbbb</div>
                                    </span>
                                        
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column prop="goodsPrice" label="价格" width="120">
                        </el-table-column>
                        <el-table-column label="数量">
                            <template slot-scope="scope">
                                <el-input-number size="mini" v-model="scope.row.goodsNumber" @change="handleChange(scope.row)" :min="1"
                                    :max="10" label="描述文字"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="小计" width="120">
                            <template slot-scope="scope">
                                <span style="color:red; font-weight:600; ">￥{{ (scope.row.goodsPrice *
                                    scope.row.goodsNumber).toFixed(2) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger" @click="eventDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="text-align:right;">
                        <div>选中金额：<span style="color:red;font-sixe:30px;">{{ total }}</span></div>                        
                        <div>运费：{{yunfei}}</div>
                        <div>总金额：{{ ( total) }}<span></span></div>
                        <div><el-button type="danger" >立即结算</el-button></div>
                    </div>
                </div>
            </div>
        </div>

        <!--底部区域-->
        <PageFooter />
    </div>
</template>

<script>

//引入组件页面
import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'

export default {
    computed:{
        total(){
            let sum = 0
            this.multipleSelection.forEach(x=>{
                sum += x.goodsNumber * x.goodsPrice  //将选中的商品，每行的小计合计起来
            })

            //判断运费
            if(sum < 200 && sum >0) {
                sum += 8
            }

            return sum.toFixed(2)
        },
    },
    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav, PageHeader, PageFooter
    },
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            yunfei:0
        }
    },
    mounted() {

        // /**
        //  * 2023/3/13
        //  * 周考3-判断用户是否登录        
        //  */
        // let userid = localStorage.getItem('login-userinfo')
        // // console.log('-------------20230313测试打印：获取缓存的用户id-----------')
        // // console.log(userid)
        // if(userid == null){
        //     //获取的缓存用户id为null，说明没有缓存或没有登录，这个时候，需要跳转
        //     this.$router.push('/member/login')
        // }

        this.onloadData()
    },
    methods: {
        //计数器的改变
        handleChange(row) {
            //console.log(row);
            let user = localStorage.getItem('localstroage_userinfo')
            let url = this.$baseUrl + 'api/shoppingcar'
            let data = {
                "goodsId": row.goodsId,
                "goodsNumber": row.goodsNumber,
                "memberId": JSON.parse(user).id,
            }
            this.$http.put(url, data).then(res => {
                console.log(res);
            })
        },
        //删除删除
        eventDelete(row) {
            let data = []
            if (row.goodsId == undefined) {
                //这个是批量删除
                data = this.multipleSelection
            }
            else {
                //这个是行单删除
                data.push(
                    {
                        "goodsId": row.goodsId,
                        "memberId": row.memberId
                    }
                )
            }

            let url = this.$baseUrl + 'api/ShoppingCar'
            this.$http.delete(url, { data: data }).then(res => {
                console.log(res);
            })
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        onloadData() {
            //加载登录用户的购物车信息
            let user = localStorage.getItem('localstroage_userinfo')
            if (user == undefined) {
                this.$message.error('请先登录')
                return
            }
            //把json字符串，转为json对像，就可以...出来
            let userinfo = JSON.parse(user)

            let url = this.$baseUrl + 'api/ShoppingCar'
            this.$http.get(url, {
                params: { memberId: userinfo.id }
            })
                .then(res => {
                    //console.log(res)
                    this.tableData = res.data.data
                })
        }
    }
}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.bbbb{
    display: none;
}
.aaaa:hover >.bbbb{
    display: block;
}
</style>